// 账号登陆正则判断
const oUser = document.querySelector('.user')
const oPass = document.querySelector('.pass')
const oYz = document.querySelector('.yz')

const oUser2 = document.querySelector('.user2')
const oPass2 = document.querySelector('.pass2')
const oJiaoyan = document.querySelector('.jiaoyan')

const oBtn = document.querySelector('.loginBtn')
const oBtn2 = document.querySelector('.loginBtn2')

const flagArr = [false, false, false]
const flagArr2 = [false, false, false]


// 第一个验证判断
// 用户名
oUser.onblur = function () {
    if (oUser.value === '') {
        this.nextElementSibling.nextElementSibling.style.display = 'block'
        this.nextElementSibling.nextElementSibling.innerHTML = '请输入用户名/邮箱/手机号'
        this.nextElementSibling.style.display = 'block'
        oUser.style.borderColor = '#ff6666'
        flagArr[0] = false
    }
}
oUser.onfocus = function () {
    this.nextElementSibling.nextElementSibling.style.display = 'none'
    this.nextElementSibling.style.display = 'none'
    oUser.style.borderColor = '#ccc'
    flagArr[0] = true
}

// 密码
oPass.onblur = function () {
    if (oPass.value === '') {
        this.nextElementSibling.nextElementSibling.style.display = 'block'
        this.nextElementSibling.nextElementSibling.innerHTML = '请输入密码'
        this.nextElementSibling.style.display = 'block'
        oPass.style.borderColor = '#ff6666'
        flagArr[1] = false

    }
}
oPass.onfocus = function () {
    this.nextElementSibling.nextElementSibling.style.display = 'none'
    this.nextElementSibling.style.display = 'none'
    oPass.style.borderColor = '#ccc'
    flagArr[1] = true

}

// 验证码
oYz.onblur = function () {
    if (oYz.value === '') {
        this.nextElementSibling.nextElementSibling.style.display = 'block'
        this.nextElementSibling.nextElementSibling.innerHTML = '请输入验证码'
        this.nextElementSibling.style.display = 'block'
        oYz.style.borderColor = '#ff6666'
        flagArr[2] = false
    }
}
oYz.onfocus = function () {
    this.nextElementSibling.nextElementSibling.style.display = 'none'
    this.nextElementSibling.style.display = 'none'
    oYz.style.borderColor = '#ccc'
    flagArr[2] = true

}

// 第二个验证判断
// 用户名
oUser2.onblur = function () {
    if (oUser2.value === '') {
        this.nextElementSibling.nextElementSibling.style.display = 'block'
        this.nextElementSibling.nextElementSibling.innerHTML = '请输入手机号'
        this.nextElementSibling.style.display = 'block'
        oUser2.style.borderColor = '#ff6666'
        flagArr2[0] = false
    }
}
oUser2.onfocus = function () {
    this.nextElementSibling.nextElementSibling.style.display = 'none'
    this.nextElementSibling.style.display = 'none'
    oUser2.style.borderColor = '#ccc'
    flagArr2[0] = true
}

// 密码
oPass2.onblur = function () {
    if (oPass2.value === '') {
        this.nextElementSibling.nextElementSibling.style.display = 'block'
        this.nextElementSibling.nextElementSibling.innerHTML = '请输入验证码'
        this.nextElementSibling.style.display = 'block'
        oPass2.style.borderColor = '#ff6666'
        flagArr2[1] = false

    }
}
oPass2.onfocus = function () {
    this.nextElementSibling.nextElementSibling.style.display = 'none'
    this.nextElementSibling.style.display = 'none'
    oPass2.style.borderColor = '#ccc'
    flagArr2[1] = true

}

// 验证码
oJiaoyan.onblur = function () {
    if (oJiaoyan.value === '') {
        oJiaoyan.style.borderColor = '#ff6666'
        flagArr2[2] = false
    }
}
oJiaoyan.onfocus = function () {
    oJiaoyan.style.borderColor = '#ccc'
    flagArr2[2] = true

}

// 立即登录

//提交按钮1
oBtn.onclick = function () {
    for (let i = 0; i < flagArr.length; i++) {
        if (flagArr[i] === false) {
            console.log(flagArr)
            // 用户名
            oUser.nextElementSibling.nextElementSibling.style.display = 'block'
            oUser.nextElementSibling.nextElementSibling.innerHTML = '请输入用户名/邮箱/手机号'
            oUser.nextElementSibling.style.display = 'block'
            oUser.style.borderColor = '#ff6666'

            // 密码
            oPass.nextElementSibling.nextElementSibling.style.display = 'block'
            oPass.nextElementSibling.nextElementSibling.innerHTML = '请输入密码'
            oPass.nextElementSibling.style.display = 'block'
            oPass.style.borderColor = '#ff6666'

            //验证码
            oYz.nextElementSibling.nextElementSibling.style.display = 'block'
            oYz.nextElementSibling.nextElementSibling.innerHTML = '请输入验证码'
            oYz.nextElementSibling.style.display = 'block'
            oYz.style.borderColor = '#ff6666'
        }
    }
    var obj = {
        telphone: oUser.value,
        phoneCode: oPass.value,
        password: oYz.value
    }
    console.log(obj)
}

// 提交按钮2
oBtn2.onclick = function () {
    for (let i = 0; i < flagArr2.length; i++) {
        if (flagArr2[i] === false) {
            console.log(flagArr2)
            // 用户名
            oUser2.nextElementSibling.nextElementSibling.style.display = 'block'
            oUser2.nextElementSibling.nextElementSibling.innerHTML = '请输入手机号'
            oUser2.nextElementSibling.style.display = 'block'
            oUser2.style.borderColor = '#ff6666'

            // 密码
            oPass2.nextElementSibling.nextElementSibling.style.display = 'block'
            oPass2.nextElementSibling.nextElementSibling.innerHTML = '请输入验证码'
            oPass2.nextElementSibling.style.display = 'block'
            oPass2.style.borderColor = '#ff6666'

            //验证码
            oJiaoyan.style.borderColor = '#ff6666'
        }
    }
    var obj2 = {
        telphone: oUser2.value,
        phoneCode: oPass2.value,
        password: oJiaoyan.value
    }
    console.log(obj2)
}
